<template>
  <div class="play">
    <div class="top">
      <van-sticky>
        <van-nav-bar
          left-text="返回"
          title="播放"
          left-arrow
          @click-left="getBack"
        >
          <template #right>
            <van-icon name="search" size="18" />
          </template>
        </van-nav-bar>
      </van-sticky>
    </div>

    
    <div class="content">
        <div class="img-box">
            <img :src="imgSrc+playList.src" >
        </div>
            <div class="title">{{playList.title}}</div>

        <div class="menu">
            <audio controls>
                <source :src="playList.playUrl">
            </audio>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "play",
  data() {
    return {
      playList: {},
      imgSrc: "//imagev2.xmcdn.com/",
    };
  },
  created() {
    // console.log(albumId);
    this.playList = this.$route.params
    // console.log(this.playList.id);
    // console.log(this.playList.playUrl);
    // this.getgridData(albumId);
  },
  methods: {
    getBack() {
      this.$router.go(-1);
    },
    getPlayData() {

    }
  },
};
</script>

<style lang="less" scoped>
.content{
    padding: 0px 5px;
}
.img-box{
    width: 200px;
    height: 200px;
    margin: auto;
    margin-top: 50px;
    img{
        width: 200px;
        border-radius: 50%;
        overflow: hidden;
    }
}
.title{
    margin-top:15px;
    text-align: center;
}
.menu{
    margin-top: 40px;
    padding: 0px 24px;
}
</style>